<template>
  <div  :style="pageStyle">
    <SplitPane
        direction="column"
        :min="20"
        :max="80"
        :triggerLength="5"
        :paneLengthPercent.sync="paneLengthPercent"
    >
      <template v-slot:one>
        <panelSql :parameter="parameter" ref="sql"/>
      </template>

      <template v-slot:two >
        <panelDataTable v-if="isShowTable" :parameter="parameter"  ref="dataTable"/>
      </template>
    </SplitPane>
  </div>
</template>

<script scoped>

import panelSql from '../panel/panel-sql'
import panelDataTable from '../panel/panel-data-table'
import SplitPane from './split-pane'

export default {
  name: "sqlData",
  props: {parameter: Object},
  components: {panelSql, panelDataTable, SplitPane},
  computed: {},
  data() {
    return {
      isShowTable: true,
      paneLengthPercent: 30,
      pageStyle:{
        'height':  (window.innerHeight - 265) + 'px',
        'padding': '10px',
        // 'background': '#000'
      }
    }
  },
  methods: {
    sqlFormat() {
      this.$refs.sql.sqlFormat();
    },
    run() {
      this.$refs.sql.run();
    }
  },
  mounted() {
  },
  created() {
  }
}
</script>

<style scoped>
</style>